grid {
display: grid;
grid: 300px/400px;
margin: 10px auto 0;
position: relative;
cursor: pointer;
}
grid > * {
grid-area:1/1;
}
w:nth-of-type(1) {
width:80%;
height:20px;
margin:0 0 auto auto;
}
w:nth-of-type(2) {
width:80%;
height:20px;
margin:auto 0 0 auto;
}
w:nth-of-type(3) {
width:20px;
height:100%;
margin-left:auto;
}
w:nth-of-type(4) {
width:20px;
height:40%;
margin:0 auto auto 15%;
}
w:nth-of-type(5) {
width:20px;
height:40%;
margin: auto auto 0 15%;
}
w:nth-of-type(6) {
width: 15%;
height: 20px;
margin: 0;
}
w:nth-of-type(7) {
width: 20%;
height: 20px;
margin: auto auto 28% 0;
}
w:nth-of-type(8) {
width: 20px;
height: 40%;
margin: 15% 0 0 0;
}
s {
aspect-ratio: 1;
height: calc(100% - 40px);
margin: auto 40px auto auto;
display: grid;
pointer-events: none;
border-radius: 50%;
clip-path: polygon(0 0,100% 100%,0 100%,100% 0);
animation: r 6s infinite linear;
}
@keyframes r {
to {transform:rotate(1turn)}
}
s:nth-of-type(2) {
height: calc(100% - 80px);
margin: auto 60px auto auto;
animation: r 4s infinite linear reverse;
}
s:nth-of-type(3) {
height: calc(100% - 120px);
margin: auto 80px auto auto;
animation: r 5s infinite alternate;
}
s:nth-of-type(4) {
height: calc(100% - 160px);
margin: auto 100px auto auto;
animation: r 6s infinite alternate cubic-bezier(.85,.7,.95,1.5);
}
s:before {
content: "";
background: grey;
pointer-events: initial;
clip-path: polygon(100% 50%, 99.35% 58.02%, 97.43% 65.83%, 94.27% 73.24%, 89.97% 80.04%, 84.64% 86.06%, 78.4% 91.15%, 71.43% 95.17%, 63.91% 98.03%, 56.03% 99.64%, 47.99% 99.96%, 40% 98.99%, 32.27% 96.75%, 25% 93.3%, 18.38% 88.73%, 12.57% 83.16%, 7.74% 76.72%, 4% 69.6%, 1.45% 61.97%, 0.16% 54.02%, 0.16% 45.98%, 1.45% 38.03%, 4% 30.4%, 7.74% 23.28%, 12.57% 16.84%, 18.38% 11.27%, 25% 6.7%, 32.27% 3.25%, 40% 1.01%, 47.99% 0.04%, 56.03% 0.36%, 63.91% 1.97%, 71.43% 4.83%, 78.4% 8.85%, 84.64% 13.94%, 89.97% 19.96%, 94.27% 26.76%, 97.43% 34.17%, 99.35% 41.98%, 100% 50%, calc(99.35% - 19.74px) calc(41.98% - -3.21px), calc(97.43% - 18.97px) calc(34.17% - -6.33px), calc(94.27% - 17.71px) calc(26.76% - -9.29px), calc(89.97% - 15.99px) calc(19.96% - -12.01px), calc(84.64% - 13.85px) calc(13.94% - -14.42px), calc(78.4% - 11.36px) calc(8.85% - -16.46px), calc(71.43% - 8.57px) calc(4.83% - -18.07px), calc(63.91% - 5.56px) calc(1.97% - -19.21px), calc(56.03% - 2.41px) calc(0.36% - -19.85px), calc(47.99% - -0.81px) calc(0.04% - -19.98px), calc(40% - -4px) calc(1.01% - -19.6px), calc(32.27% - -7.09px) calc(3.25% - -18.7px), calc(25% - -10px) calc(6.7% - -17.32px), calc(18.38% - -12.65px) calc(11.27% - -15.49px), calc(12.57% - -14.97px) calc(16.84% - -13.26px), calc(7.74% - -16.9px) calc(23.28% - -10.69px), calc(4% - -18.4px) calc(30.4% - -7.84px), calc(1.45% - -19.42px) calc(38.03% - -4.79px), calc(0.16% - -19.94px) calc(45.98% - -1.61px), calc(0.16% - -19.94px) calc(54.02% - 1.61px), calc(1.45% - -19.42px) calc(61.97% - 4.79px), calc(4% - -18.4px) calc(69.6% - 7.84px), calc(7.74% - -16.9px) calc(76.72% - 10.69px), calc(12.57% - -14.97px) calc(83.16% - 13.26px), calc(18.38% - -12.65px) calc(88.73% - 15.49px), calc(25% - -10px) calc(93.3% - 17.32px), calc(32.27% - -7.09px) calc(96.75% - 18.7px), calc(40% - -4px) calc(98.99% - 19.6px), calc(47.99% - -0.81px) calc(99.96% - 19.98px), calc(56.03% - 2.41px) calc(99.64% - 19.85px), calc(63.91% - 5.56px) calc(98.03% - 19.21px), calc(71.43% - 8.57px) calc(95.17% - 18.07px), calc(78.4% - 11.36px) calc(91.15% - 16.46px), calc(84.64% - 13.85px) calc(86.06% - 14.42px), calc(89.97% - 15.99px) calc(80.04% - 12.01px), calc(94.27% - 17.71px) calc(73.24% - 9.29px), calc(97.43% - 18.97px) calc(65.83% - 6.33px), calc(99.35% - 19.74px) calc(58.02% - 3.21px), calc(100% - 20px) calc(50% - 0px), calc(99.35% - 19.74px) calc(41.98% - -3.21px));
}
g {
width: 50px;
aspect-ratio: 1;
margin: auto;
transform: translate(30px);
background:
conic-gradient(from 152deg at top,#ccf2fc 55deg,#0000 0) top/100% 30% no-repeat,
conic-gradient(from -36deg at bottom,#104d87 22deg, #2de8f4 0 50deg, #0095d9 0 72deg,#0000 0) bottom/100% 70% no-repeat,
linear-gradient(90deg,#0597de 50%,#2ed7f2 0) top/100% 30% no-repeat;
clip-path: polygon(0 30%,21% 0,79% 0,100% 30%,100% 100%,0 100%);
transition: 9999s 9999s;
}
result {
position: absolute;
inset: 0 0 0 100%;
display:grid;
place-content: center;
font-size: 70px;
color: #00b300;
overflow: hidden;
background: #fff9;
transition: 9999s 9999s;
}
result:before {
content: "Bravo!";
}
g:hover {
background-size: 0 0;
transition: 0s;
}
g:hover ~ result,
result:hover{
inset: 0 0 0 0;
transition: 0s;
}
w {
background: grey;
}
w::before {
content: "Game Over";
position: fixed;
inset: 0 0 100%;
z-index: 5695845;
background: #000;
color: red;
font-size: 80px;
display: grid;
place-content: center;
overflow: hidden;
transition: 99999s;
}
w::after {
content: "Refresh the page to start a new game";
position: fixed;
inset: 0 0 100%;
z-index: 5695845;
color: #fff;
font-size: 30px;
display: grid;
place-content: end center;
overflow: hidden;
transition: 99999s;
}
s:hover ~ w::before,
s:hover ~ w::after,
w:hover::before,
w:hover::after{
inset: 0;
transition: 0s;
}
@property --n{
syntax: '<integer>';
inherits: true;
initial-value: 0;
}
@property --t{
syntax: '<color>';
inherits: true;
initial-value: #000;
}
@property --r{
syntax: '<color>';
inherits: true;
initial-value: #000;
}
@property --b{
syntax: '<color>';
inherits: true;
initial-value: #000;
}
@property --l{
syntax: '<color>';
inherits: true;
initial-value: #000;
}
d {
width: 40px; /* size */
display: inline-grid;
aspect-ratio: .55;
}
d:before,
d:after {
content: "";
padding: 20%;
background:
conic-gradient(from -45deg at 50% 45%,var(--t) 90deg,#0000 0),
conic-gradient(from 45deg at 55% 50%,var(--r) 90deg,#0000 0),
conic-gradient(from 135deg at 50% 55%,var(--b) 90deg,#0000 0),
conic-gradient(from 225deg at 45% 50%,var(--l) 90deg,#0000 0);
--m: conic-gradient(#000 0 0) content-box,conic-gradient(#000 0 0);
-webkit-mask: var(--m);
mask: var(--m);
-webkit-mask-composite: xor;
mask-composite: exclude;
clip-path: polygon(25% 0,75% 0,100% 25%,100% 75%,75% 100%,25% 100%,0 75%,0 25%);
transition:--t .45s,--l .45s,--b .45s,--r .45s;
}
d:after {
margin-top: -20%;
--t: #0000;
}
d {
--1:(var(--n) - 1)*(var(--n) - 1);
--2:(var(--n) - 2)*(var(--n) - 2);
--3:(var(--n) - 3)*(var(--n) - 3);
--4:(var(--n) - 4)*(var(--n) - 4);
--5:(var(--n) - 5)*(var(--n) - 5);
--6:(var(--n) - 6)*(var(--n) - 6);
--7:(var(--n) - 7)*(var(--n) - 7);
--8:(var(--n) - 8)*(var(--n) - 8);
--9:(var(--n) - 9)*(var(--n) - 9);
}
d:before {
--t:rgb(
clamp(30,var(--1)*var(--4)*999,250)
clamp(30,var(--1)*var(--4)*999,250)
30);
--r:rgb(
clamp(30,var(--5)*var(--6)*999,250)
clamp(30,var(--5)*var(--6)*999,250)
30);
--b:rgb(
clamp(30,var(--n)*var(--1)*var(--7)*999,250)
clamp(30,var(--n)*var(--1)*var(--7)*999,250)
30);
--l:rgb(
clamp(30,var(--1)*var(--2)*var(--3)*var(--7)*999,250)
clamp(30,var(--1)*var(--2)*var(--3)*var(--7)*999,250)
30);
}
d:after {
--r:rgb(
clamp(30,var(--2)*999,250)
clamp(30,var(--2)*999,250)
30);
--b:rgb(
clamp(30,var(--1)*var(--4)*var(--7)*999,250)
clamp(30,var(--1)*var(--4)*var(--7)*999,250)
30);
--l:rgb(
clamp(30,var(--1)*var(--3)*var(--4)*var(--5)*var(--7)*var(--9)*999,250)
clamp(30,var(--1)*var(--3)*var(--4)*var(--5)*var(--7)*var(--9)*999,250)
30);
}
timer d:nth-of-type(1) {animation:d6 60s linear infinite}
timer d:nth-of-type(2) {animation:d9 10s linear infinite}
timer d:nth-of-type(3) {animation:d9 1s linear infinite;grid-column:4}
timer d:nth-of-type(4) {animation:d9 .1s linear infinite}
@keyframes d9 {
0%,
9.95%{--n:0}
10%,
19.95%{--n:1}
20%,
29.95%{--n:2}
30%,
39.95%{--n:3}
40%,
49.95%{--n:4}
50%,
59.95%{--n:5}
60%,
69.95%{--n:6}
70%,
79.95%{--n:7}
80%,
89.95%{--n:8}
90%,
99.95%{--n:9}
}
@keyframes d6 {
0%,
16.64%{--n:0}
16.67%,
33.30%{--n:1}
33.33%,
49.96%{--n:2}
50.00%,
66.63%{--n:3}
66.67%,
83.30%{--n:4}
83.33%,
99.97%{--n:5}
}
timer {
position: absolute;
display: grid;
top: 50%;
left: 100%;
transform: translate(20%, -50%);
grid-template-columns: 1fr 1fr 10px 1fr 1fr;
grid-gap: 10px;
pointer-events: none;
background:
linear-gradient(rgb(250 250 30) 0 0) 50% 30%/10px 10px no-repeat,
linear-gradient(rgb(250 250 30) 0 0) 50% 70%/10px 10px no-repeat;
}
@media (max-width:900px) {
timer {
top: 100%;
left: 50%;
transform: translate(-50%, 10%);
}
}
grid timer d:nth-child(n),
grid result:hover ~ timer d:nth-child(n){
animation-play-state: paused;
}
grid:hover timer d:nth-child(n) {
animation-play-state: running;
}
grid:hover timer {
filter: hue-rotate(45deg);
}
body {
min-height: 100vh;
margin: 0;
display: grid;
place-content: start center;
background: #000;
color: #fff;
font-family: system-ui, sans-serif;
}
h1,p {
font-size: 2rem;
margin:0;
text-align:center;
}
p {
font-size:1.2rem;
}
@supports (-moz-appearance:none) {
d {
font-size: 65px;
font-weight: bold;
font-family: sans-serif;
color:rgb(250 250 30);
}
d:before {
padding:0;
-webkit-mask:none;
clip-path:none;
}
d:after {
content: none;
}
timer d:nth-of-type(1):before {animation:d6 60s linear infinite}
timer d:nth-of-type(2):before {animation:d9 10s linear infinite}
timer d:nth-of-type(3):before {animation:d9 1s linear infinite}
timer d:nth-of-type(4):before {animation:d9 .1s linear infinite}
@keyframes d9 {
0%,
9.95%{content:'0'}
10%,
19.95%{content:'1'}
20%,
29.95%{content:'2'}
30%,
39.95%{content:'3'}
40%,
49.95%{content:'4'}
50%,
59.95%{content:'5'}
60%,
69.95%{content:'6'}
70%,
79.95%{content:'7'}
80%,
89.95%{content:'8'}
90%,
99.95%{content:'9'}
}
@keyframes d6 {
0%,
16.64%{content:'0'}
16.67%,
33.30%{content:'1'}
33.33%,
49.96%{content:'2'}
50.00%,
66.63%{content:'3'}
66.67%,
83.30%{content:'4'}
83.33%,
99.97%{content:'5'}
}
grid timer d:nth-child(n):before,
grid result:hover ~ timer d:nth-child(n):before{
animation-play-state: paused;
}
grid:hover timer d:nth-child(n):before {
animation-play-state: running;
}
}